<template>
  <view class="order-container">
    <EmptyTop />
    <view class="nav-wrap">
      <uni-nav-bar background-color="#007aff" color="#ffffff">
        <view slot="default" class="nav-title">
          <text @click="handleShowMore">{{ title }}</text>
          <view v-if="options.length>0">
            <uni-icons v-if="!showMore" type="arrowdown" size="18" color="#ffffff" @click="handleShowMore"></uni-icons>
            <uni-icons v-else type="arrowup" size="18" color="#ffffff" @click="handleShowMore"></uni-icons>
          </view>
        </view>
      </uni-nav-bar>
    </view>
    <view class="main-body">
      <Delivery v-if="type==0" ref="delivery" :init-data="searchParams1" />
      <Base v-if="type==1" ref="base" :init-data="searchParams" />
    </view>
    <TypeSelect ref="typeSelect" v-model="type" :options="options" type="bottom" @change="onTypeChange" @select="onTypeSelect"></TypeSelect>
  </view>
</template>

<script>
import EmptyTop from "../../components/public/EmptyTop/index.vue";
import Delivery from "./components/Delivery.vue";
import Base from "./components/Base.vue";
import TypeSelect from "./components/TypeSelect.vue";
import { mapActions, mapGetters, mapMutations } from "vuex";
import global from "../../config/global";
export default {
  components: {
    Delivery,
    Base,
    EmptyTop,
    TypeSelect
  },
  data() {
    return {
      showMore: false,
      type: 0,
      options: [
        { label: "外送订单", value: 0 },
        { label: "店内订单", value: 1 }
      ],
      searchParams: { startTime: "", endTime: "" }, // 店内
      searchParams1: { startTime: "", endTime: "" } // 外送
    };
  },
  computed: {
    ...mapGetters({
      global: "global"
    }),
    title() {
      let item = this.options.find(v => v.value == this.type);
      return item ? item.label : "";
    }
  },
  onLoad() {
    for (let key in this.global.ORDER_PAGE_INIT_DATA) {
      if (this.type == 1)
        this.searchParams1[key] = this.global.ORDER_PAGE_INIT_DATA[key];
      if (this.type === 0)
        this.searchParams[key] = this.global.ORDER_PAGE_INIT_DATA[key];
    }
  },
  onReady() {
    this.init();
  },
  onShow() {
    if (this.global.ORDER_PAGE_HAS_SHOW && this.global.ORDER_PAGE_INIT_DATA) {
      this.init();
    }
    if (this.global.ORDER_PAGE_HAS_SHOW && !this.global.ORDER_PAGE_INIT_DATA) {
      this.initOrderList();
    }
  },
  methods: {
    ...mapMutations({
      SET_GLOBAL_DATA: "SET_GLOBAL_DATA"
    }),
    init() {
      // 设置全局变量
      this.SET_GLOBAL_DATA({ ORDER_PAGE_HAS_SHOW: true });
      //判断初始值中是否有type值，如果没有则不改变
      this.type =
        this.global.ORDER_PAGE_INIT_DATA &&
        !this.$isNull(this.global.ORDER_PAGE_INIT_DATA.showOrderType)
          ? this.global.ORDER_PAGE_INIT_DATA.showOrderType
          : this.type;
      console.log(" this.type", this.type, this.global.ORDER_PAGE_INIT_DATA);

      // 保证页面已经加载完，根据type初始化
      let params = this.global.ORDER_PAGE_INIT_DATA || {};
      for (let key in params) {
        if (this.type === 0) this.searchParams[key] = params[key];
        if (this.type == 1) this.searchParams1[key] = params[key];
      }
      this.$nextTick(() => {
        this.initOrderList();
        this.SET_GLOBAL_DATA({ ORDER_PAGE_INIT_DATA: null });
      });
    },
    initOrderList() {
      if (this.type === 0) this.$refs.delivery.init(this.searchParams || {});
      if (this.type == 1) this.$refs.base.init(this.searchParams1 || {});
    },
    handleShowMore() {
      this.showMore = !this.showMore;
      if (!this.showMore) {
        this.$refs.typeSelect.close();
      } else {
        this.$refs.typeSelect.open();
      }
      // uni.showActionSheet({
      //   itemList: this.options.map(v => v.label),
      //   popover: {
      //     top: 0
      //   },
      //   success: ({ tapIndex }) => {
      //     this.type == this.options[tapIndex];
      //     this.$nextTick(() => {
      //       if (this.type === 0) {
      //         this.$refs.delivery.init(this.searchParams);
      //       } else {
      //         this.$refs.base.init(this.searchParams);
      //       }
      //     });
      //     this.showMore = !this.showMore;
      //   },
      //   fail: res => {
      //     console.log(res.errMsg);
      //     this.showMore = !this.showMore;
      //   }
      // });
    },
    onTypeChange(e) {
      this.showMore = e.show;
    },
    onTypeSelect() {
      this.$nextTick(() => {
        if (this.type === 0) {
          this.$refs.delivery.init(this.searchParams);
        } else {
          this.$refs.base.init(this.searchParams1);
        }
      });
    }
  }
};
</script>

<style lang="scss">
.order-container {
  // box-sizing: border-box;
  // padding: 0 20rpx;
  height: 100%;
  .nav-wrap {
    .uni-navbar--border {
      border-bottom-color: $themeColor;
    }
    .nav-title {
      display: flex;
      justify-content: center;
      width: 100%;
    }
  }
  .main-body {
    height: calc(100% - 50px - var(--status-bar-height));
  }
}
</style>
